<template>
  <el-dialog v-model="deleteVisible" width="50%" align-center class="Vdialog" @close="cancel">
    <template #header>
      <h4 class="dialogName">人员管理</h4>
    </template>
    <div class="content">
      <div class="userName">{{ roleName }}</div>
      <el-input class="search" v-model="input" size="large" placeholder="搜索" prefix-icon="Search" />
      <el-cascader-panel v-model="userData.user_ids" :options="options" :props="cascaderProps" ref="cascaderPanel"
        class="cascaderPanel" />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm" :loading="loading.save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="VRole">
import { reactive, ref, toRefs } from 'vue'
import { organizationList } from "@/api/system/role"
const emits = defineEmits(['cancel', 'confirm'])
// 声明接收参数
const props = defineProps({
  userData: {
    type: Object,
    default: {}
  },
  roleName: {
    type: String,
    default: ''
  }
})
const data = reactive({
  deleteVisible: false,
  loading: {},
  input: '',
  cascaderProps: {
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'id',
    children: 'sub'
  },
  options: [],
})

const { deleteVisible, loading, input, cascaderProps, options } = toRefs(data)
const { userData, roleName } = toRefs(props)
const cascaderPanel = ref()
const open = () => {
  organizationList().then(res => {
    options.value = res.data
  })
  deleteVisible.value = true
}
const confirm = () => {
  const arr = cascaderPanel.value.getCheckedNodes(), userArr = []
  arr.map(res => {
    if (res.data.organization_type === 2) {
      userArr.push(res.data.id)
    }
  })
  // const oldArr = JSON.parse(JSON.stringify(userData.value.user_ids))
  // userData.value.user_ids = ['138']
  // userData.value.user_ids = userData.value.user_ids.concat(oldArr)
  loading.value.save = true
  emits('confirm', userArr)
}
const cancel = () => {
  deleteVisible.value = false
  loading.value.save = false
  emits('cancel')
}
defineExpose({
  open, data, cancel
})
</script>
<style lang="scss" scoped>
.content {
  align-items: center;
  margin: 20px;
  border: 1px solid #dadce4;
  border-radius: 10px;

  .userName {
    background-color: #3e66ee;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    letter-spacing: 1px;
  }

  .search {
    margin: 10px;
    box-sizing: content-box;
    width: calc(100% - 20px);
    border: none;

    &:deep(.el-input__wrapper) {
      padding: 1px 15px;
      box-shadow: none;
      background-color: #fafafa;
    }
  }
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}

.cascaderPanel {
  overflow: auto;
  height: 400px;

  &:deep(.el-scrollbar__wrap) {
    height: 100% !important;
  }
}
</style>